<template>
    <div class="action">
        <div @click="emitOther" v-if="props.otherText" class="action-item">
            <FileImageTwoTone />
            <a>{{ props.otherText }}</a>
        </div>
        <div @click="emitOtherTwo" v-if="props.otherTwoText" class="action-item">
            <ShopTwoTone />
            <a>{{ props.otherTwoText }}</a>
        </div>
        <div v-if="showEdit" @click="emitEdit" class="action-item">
            <FormOutlined />
            <a>编辑</a>
        </div>
        <div v-if="showDelete" class="action-item">
            <a-popconfirm
                title="你确定要删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirm"
                @cancel="cancel"
            >
                <DeleteOutlined />
                <a>删除</a>
            </a-popconfirm>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'
    import { Popconfirm } from 'ant-design-vue'
    import {
        FormOutlined,
        DeleteOutlined,
        FileImageTwoTone,
        ShopTwoTone,
    } from '@ant-design/icons-vue'
    // 定义组件
    export default defineComponent({
        name: 'Action',
        props: {
            otherText: {
                type: String,
            },
            otherTwoText: {
                type: String,
            },
            showDelete: {
                type: Boolean,
                default: true,
            },
            showEdit: {
                type: Boolean,
                default: true,
            },
        },
        emits: ['otherEvent', 'edit', 'otherTwoEvent', 'delete'],
        components: { Popconfirm, FormOutlined, DeleteOutlined, FileImageTwoTone, ShopTwoTone },
        setup(props, { emit }) {
            const confirm = () => {
                emit('delete')
            }

            const cancel = (e: MouseEvent) => {
                console.log(e)
            }

            const emitOther = () => {
                emit('otherEvent')
            }
            const emitOtherTwo = () => {
                emit('otherTwoEvent')
            }
            const emitEdit = () => {
                emit('edit')
            }
            return {
                confirm,
                cancel,
                emitOther,
                emitOtherTwo,
                emitEdit,
                props,
            }
        },
    })
</script>

<style lang="less" scoped>
    .action {
        display: flex;
        justify-content: space-around;
    }

    .action-item {
        display: flex;
        align-items: center;
        cursor: pointer;

        a {
            margin-left: 5px;
        }
    }
</style>
